<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册事件</title>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
    </div>
</body>
<script>
    /*
    注册事件有两种方式
            传统方式 node.onclick=function(){}
                利用on开头 onclick 
                特点:注册事件的唯一性(同一个元素的同一个事件只能设置一个处理函数 最后的处理函数会覆盖前面的)
            方法监听注册 w3c标准 addEventListener()
                特点: 同一个元素同一个事件可以添加多个监听器(按注册顺序依次执行)
                参数
                    type  事件类型 click mouseover (不带on)
                    listener 事件处理函数  会调用该函数
                    useCapture 可选参数 默认为false
    */
   let root=document.getElementById('root')
   root.children[0].onclick=function (){
    // console.log(this.innerHTML)
   }
//    会覆盖前面的函数
   root.children[0].onclick=function (){
    // console.log(this.innerHTML+'werfgthng  ')
   }
   root.children[0].onmouseover=function (){
    // console.log(Date.now())
   }
  let r1= root.children[1]
  r1.addEventListener('click',function () {
        console.log('你好世界')
  })
  const fun =function () {
    // console.log(this)
        console.log('你好世界ww2w')
  }
 
  r1.addEventListener('click',fun)
  r1.addEventListener('click',function () {
    console.log('你好')
  })
  r1.onclick=function () {
    console.log('传统')
  }
  r1.onclick=function () {
    console.log('传统2')
  }
</script>

</html>